<section>
	<div class='intro'>
		<div class='container' data-container='0'>
			<p data-stage='0'>Ramjet lets you transform one DOM element...</p>
		</div>

		<div class='container' data-container='1'>
			<p data-stage='1'>...into another.</p>
		</div>

		<div class='container' data-container='2'>
			<p data-stage='2'>It doesn't care where they sit in the DOM tree, or what children they have...</p>
		</div>

		<!-- <svg class='container' data-container='3'>
			<defs>
				<path id='upper' d='M 40 100 C 150 30 350 30 460 100'/>
				<path id='lower' d='M 40 100 C 150 170 350 170 460 100'/>
			</defs>

			<g data-stage='3' transform='translate(50,50)'>
				<rect fill='#85144b' width='500' height='200'/>

				<text style='fill: white; font-size: 2rem; text-anchor: middle;'>
					<textPath xlink:href="#upper" startOffset='50%'>
						...or whether they're HTML
					</textPath>
				</text>

				<text style='fill: white; font-size: 2rem; text-anchor: middle;'>
					<textPath xlink:href="#lower" startOffset='50%'>
						<tspan alignment-baseline='hanging'>~~~ o r &nbsp; S V G ! ~~~</tspan>
					</textPath>
				</text>
			</g>
		</svg> -->

		<div class='container' data-container='3'>
			<p data-stage='3' style='transform: scale(1,1);'>...or if they've got existing transforms!</p>
		</div>

		<!-- I couldn't find a credit for this image -->
		<div class='container' data-container='4' data-stage='4' style='background: url(ram.jpg) no-repeat 50% 50%; background-size: cover;'>
			<p class='high-contrast'>You can use images...</p>
		</div>

		<!-- via http://tfwiki.net/wiki/File:Ramjetinpast.gif -->
		<div class='container' data-container='5' data-stage='5' style='background: url(Ramjetinpast.gif) no-repeat 50% 50%; background-size: cover;'>
			<p class='high-contrast'>...even animated ones</p>
		</div>
	</div>
</section>

<style>
	section {
		border-bottom: 1px solid #999;
	}

	.intro {
		position: relative;
		width: 100%;
		height: 20em;
		margin: 0 0 1em 0;
	}

	.intro p {
		margin: 0 0 0.5em 0;
		text-shadow: 0 0 7px rgba(0,0,0,0.1);
	}

	.intro .high-contrast {
		text-shadow: 0 0 10px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1);
	}

	.container {
		position: absolute;
		font-size: 1.4em;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	@media (min-width: 40em) {
		.container {
			font-size: 2em;
		}
	}

	[data-stage] {
		visibility: hidden;
		background-image: url(noise.png);
		/*opacity: 0.1;*/
	}

	[data-stage].visible {
		visibility: visible;
		/*opacity: 1;*/
	}

	[data-container='0'] {
		left: 0;
		top: 0;
		width: 33.333%;
		height: 50%;
	}

	[data-stage='0'] {
		background-color: #39CCCC;
		color: white;
		padding: 0.5em;
	}

	[data-container='1'] {
		left: 0;
		top: 50%;
		width: 33.333%;
		height: 50%;
	}

	[data-stage='1'] {
		background-color: #FF851B;
		color: white;
		padding: 0.5em;
	}

	[data-container='2'] {
		left: 33.333%;
		top: 50%;
		width: 66.666%;
		height: 50%;
	}

	[data-stage='2'] {
		background-color: #2ECC40;
		color: white;
		padding: 0.5em;
	}

	/*[data-container='3'] {
		left: 33.333%;
		top: 0;
		width: 66.666%;
		height: 100%;
	}*/

	[data-container='3'] {
		left: 33.333%;
		top: 0;
		width: 33.333%;
		height: 100%;
	}

	[data-stage='3'] {
		background-color: #85144b;
		color: white;
		padding: 0.5em;
	}

	[data-container='4'] {
		right: 0;
		top: 0;
		width: 33.333%;
		height: 100%;
	}

	[data-stage='4'] {
		background-color: #85144b;
		color: white;
		padding: 0.5em;
	}

	[data-container='5'] {
		right: 33.333%;
		top: 0;
		width: 33.333%;
		height: 100%;
	}

	[data-stage='5'] {
		background-color: #BBBBBB;
		color: white;
		padding: 0.5em;
	}

	.hidden {
		/*visibility: hidden;*/
		/*opacity: 0.1;*/
	}

	svg {
		height: 10em;
	}

	img {
		max-width: 100%;
	}
</style>

<script>
	const ramjet = require( './ramjet' );
	const tap = require( 'ractive-events-tap' );
	const eases = require( 'eases' );

	const addClass = require( './addClass' );
	const removeClass = require( './removeClass' );

	const Promise = Ractive.Promise;

	function loadImage ( url ) {
		return new Promise( ( fulfil, reject ) => {
			const img = new Image();

			img.onload = () => fulfil( img );
			img.onerror = reject;

			img.src = url;
		});
	}

	function wait ( ms ) {
		return new Promise( fulfil => {
			setTimeout( fulfil, ms );
		});
	}

	component.exports = {
		data: () => ({
			easingFunctions: Object.keys( eases ),
			easing: 'cubicOut',
			duration: 400,
			reverse: false,
			stage: 0
		}),

		onrender: function () {
			addClass( this.find( `[data-stage='0']` ), 'visible' );

			// only active when in view
			const el = this.find( 'section' );

			function inView () {
				const { top, bottom } = el.getBoundingClientRect();
				return top < window.innerHeight && bottom > 0;
			}

			this.set( 'inView', inView() );

			let inViewTimeout;

			this.observe( 'inView', inView => {
				clearTimeout( inViewTimeout );

				if ( inView ) {
					inViewTimeout = setTimeout( () => this.next(), 1500 );
				}
			});

			window.addEventListener( 'scroll', event => {
				this.set( 'inView', inView() );
			});

			window.addEventListener( 'keydown', event => {
				if ( event.which === 37 ) {
					this.back( event.shiftKey );
				}

				else if ( event.which === 39 ) {
					this.next( event.shiftKey );
				}
			});
		},

		next ( slow ) {
			const stage = this.get( 'stage' );
			this.goto( ( stage + 1 ) % 6, slow );
		},

		back ( slow ) {
			const stage = this.get( 'stage' ) + 6;
			this.goto( ( stage - 1 ) % 6, slow );
		},

		goto ( nextStage, slow ) {
			if ( !this.get( 'inView' ) ) return;

			const currentStage = this.get( 'stage' );

			const a = this.find( `[data-stage='${currentStage}']` );
			const b = this.find( `[data-stage='${nextStage}']` );

			addClass( a, 'visible' );
			addClass( b, 'visible' );

			ramjet.transform( a, b, {
				easing: eases[ this.get( 'easing' ) ],
				duration: slow ? 4000 : 400,
				done: () => {
					this.set( 'stage', nextStage );

					addClass( b, 'visible' );

					// setTimeout( () => {
					// 	this.next();
					// }, 1500 );
				}
			});

			removeClass( a, 'visible' );
			removeClass( b, 'visible' );
		},

		events: {
			tap
		}
	};
</script>